<script setup lang="ts">
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { onMounted, reactive, inject} from "vue";
import { IdentityHttpService, Permit, ResponseStatus } from '../service/identity-http.service';
import { ElForm,ElMessage, ElMessageBox} from "element-plus";

var httpService = inject<IdentityHttpService>('IdentityHttpService');
const state = reactive({
  tableData: new Array<Permit>(),
  tableloading: false,
});

onMounted(() => {
  httpService?.apiPermitGetPermitTree().then(result => {
    state.tableData.push(result)
  });
});

function loadTableData() {
  httpService?.apiPermitGetPermitTree().then(result => {
    state.tableData = [ result ];
  });
}

//#region ---- 通行证表单 start ----
const permitForm = reactive({
  dialogVisable: false,
  title: '新建子通行证',
  isEdit: false,
  id: 0,
  name: '',
  description: ''
});

function showPermitFormDialog(row: Permit, isEdit: boolean = false) {
  clearPermitForm();
  permitForm.title = isEdit ? '编辑通行证' : '新建子通行证';
  permitForm.isEdit = isEdit;

  permitForm.id = row.id!;
  if(isEdit) {
    permitForm.name = row.name??'';
    permitForm.description = row.description??'';
  }

  permitForm.dialogVisable = true;
}

function submitPermitForm() {
  if(permitForm.isEdit) {
    httpService?.apiPermitModify(permitForm.id, permitForm.name, permitForm.description).then(result => {
      if(result.status==ResponseStatus.Success) {
        loadTableData();
        permitForm.dialogVisable = false;
        ElMessage.success(result.message);
      } else {
        ElMessage.warning(result.message)
      }
    });
  } else {
    httpService?.apiPermitCreate(permitForm.id, permitForm.name, permitForm.description).then(result => {
      if (result.status == ResponseStatus.Success) {
        loadTableData();
        permitForm.dialogVisable = false;
        ElMessage.success(result.message);
      } else{
        ElMessage.warning(result.message)
      }
    });
  }
}

function clearPermitForm() {
  permitForm.name = '';
  permitForm.description = '';
}
//#endregion ---- 通行证表单 end ----

function deletePermit(row: Permit) {
  ElMessageBox.confirm(
    '删除通行证', '确认要删除该通行证吗？',
    { confirmButtonText: 'OK', cancelButtonText: 'Cancel', type: 'warning' }
  ).then(() => {
    httpService?.apiPermitDelete(row.id).then(result => {
      if(result.status==ResponseStatus.Success){
        loadTableData();
        ElMessage.success(result.message)
      }else{
        ElMessage.warning(result.message)
      }
    });
  });
}
</script>

<template>
  <div>
  <el-table
      class="common-table"
      :data="state.tableData"
      style="width: 100%"
      row-key="id"
      :load="state.tableloading"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      default-expand-all
  >
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="description" label="备注" />
      <el-table-column label="" width="290px">
          <template #default="scrope">
              <el-button type="primary" text :icon="Plus" @click="showPermitFormDialog(scrope.row)" >
                    新增
              </el-button>
              <el-button type="primary" text :icon="Edit" @click="showPermitFormDialog(scrope.row, true)">
                    修改
              </el-button>
              <el-button type="primary" text :icon="Delete" @click="deletePermit(scrope.row)">
                    删除
              </el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="permitForm.title"  v-model="permitForm.dialogVisable" style="width:500px" >
      <el-form :model="permitForm" >
        <el-form-item label="姓名" label-width="50px">
          <el-input v-model="permitForm.name" style="width:400px"/>
        </el-form-item>
        <el-form-item label="备注" label-width="50px" >
          <el-input v-model="permitForm.description" style="width:400px"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="permitForm.dialogVisable = false">取消</el-button>
          <el-button type="primary" @click="submitPermitForm">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>    
</template>

<style lang="scss">

</style>